import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation, EffectFade } from 'swiper/modules';
import { imgBannerFirst, imgBannerSecond, imgBannerThrid, imgBannerFourth } from '../../assets';
import './HomeBanner.less';

const HomeBanner = () => {
  const bannerImages = [
    { src: imgBannerFirst, alt: "Banner 1" },
    { src: imgBannerSecond, alt: "Banner 2" },
    { src: imgBannerThrid, alt: "Banner 3" },
    { src: imgBannerFourth, alt: "Banner 4" }
  ];

  return (
    <div className="home-banner">
      <Swiper
        effect="fade"
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        loop={true}
        modules={[Autoplay, Pagination, Navigation, EffectFade]} 
        className="home-swiper"
      >
        {bannerImages.map((image, index) => (
          <SwiperSlide key={index}>
            <div className="banner-slide">
              <img 
                src={image.src} 
                className="banner-image"
                alt={image.alt}
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default HomeBanner; 